<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li class="box">333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script>
        // jq里特殊的选择器 通过 ： 后面给选择的内容


        // 1.jq里支持 隐式迭代 ；2.支持链式操作
        // $("li").css("background","red").click(function(){
        //     console.log(111);
        // })

        // 1.获取第一个元素
        // document.onclick = function(){
            // $("li:first").css("background","red");

        // }

        // 把原生对象转成 jq对象  $(原生对象)
        // $(document).click(function(){
        //     $("li:first").css("background","red");
        // })


        // 2.获取最后一个元素
        // $(document).click(function(){
        //     $("li:last").css("background","red");
        // })

        // 3.获取所有奇数的元素； odd
        // $(document).click(function(){
        //     $("li:odd").css("background","red");
        // })

        // 4.获取所有偶数的元素 even
        // $(document).click(function(){
        //     $("li:even").css("background","red");
        // })

        // 5.获取元素排除某个元素
        // $(document).click(function(){
        //     $("li:not(.box)").css("background","red");
        // })


        // 6.获取某个索引的元素
        // $(document).click(function(){
        //     $("li:eq(3)").css("background","red")
        // })

        // 7.获取索引值大于某个值  gt 
        // $(document).click(function(){
        //     $("li:gt(2)").css("background","red")
        // })

        // gt  lt  eq  neq gte  lte  and  or 

        // 8.获取索引值小于某个值 lt
        $(document).click(function(){
            $("li:lt(2)").css("background","red")
        })
    </script>
</body>
</html>